<!DOCTYPE html>
<html>
<script src="js/jquery.min.js"></script>
<script src="js/markdown-it.min.js"></script>
<link rel="stylesheet" href="replay/css/use.css">
<link rel="stylesheet" href="replay/css/github-markdown-dark.css">


<body style="display: flex;flex: auto; ">

    <div id="operation">
        <div id="title" style="display: block;position: relative;height: 100px;">
            <img src="figures/title.png" style="width: 364px;height: 128px; position: relative;top:40px;left:75px;">
            <p style="color:aliceblue; font-size: larger;font-weight: bolder;position: relative;top:20px;left:40px;text-shadow: 0px 0px 0px rgb(252, 252, 252);">
                Communicative Agents for Advertisement</p>
        </div>
        <div id="imgShow">
            <img src="figures/chatad_company.png" alt="chatad-company" id="chatad-company">
            <img src="figures/right.png" id="right" class="blinking-animation" style="display: none;position: relative; width: 40px;height: 40px;top: -360px;left: 420px">
            <img src="figures/left.png" id="left" class="blinking-animation" style="display: none;width: 40px;height: 40px;position: relative; top: -465px;left: 125px">
        </div>
        <div style="position: relative;top:200px;display: flex;">
            <div> <input type="file" id="fileInput" accept=".log" onchange="watchfileInput(this.files)">
                <button id="filebutton" class="button">文件上传</button>
            </div>
            <div><button id="replay" class="button">回放</button></div>
        </div>
        <div class="markdown-body"><label for="filebutton" id="successupload">
            </label>
        </div>
    </div>
    <div id="show" style="display: grid;">

        <div id="humanRequest" style="position: relative; overflow: auto; padding: 0 10px">
            <p id="Requesttext" style=" color:aliceblue; display: block;font-weight: 900; max-height: 18px; max-width: 800px;">Task: </p>
        </div>
        <div id="dialogBody" style="top:20px;display: flex;flex-direction: column; background-image: url('figures/replay_bg.jpg'); background-size: cover;">
        </div>
        <div id="speedcontrol">
            <input type="range" id="speed" name="speed" min="0" max="100" onchange="speedchange()">
            <label for="speed">回放速度</label>  <!--Replay Speed-->
        </div>
        <div id="dialogStatistic" style="display: flex;flex-direction: column; background-image: url('figures/replay_bg.jpg'); background-size: cover;">
            <div style="display: flex;width: 1500px;flex-direction: row;height: 60px;">  <!--2800-->
                <div class="info">
                    <label for="num_doc_files" style="position: relative;">📚项目文件数</label>  <!--num_doc_files-->
                    <p id="num_doc_files"></p>
                </div>
                <div class="info">
                    <label for="num_utterances" style="position: relative;">🗣多智能体对话次数</label>
                    <p id="num_utterances"></p>
                </div>
                <div class="info">
                    <label for="num_self_reflections" style="position: relative;">🤔多智能体反思次数</label>
                    <p id="num_self_reflections"></p>
                </div>
                <div class="info">
                    <label for="num_prompt_tokens" style="position: relative;">❓提示词的token数</label>
                    <p id="num_prompt_tokens"></p>
                </div>
                <div class="info">
                    <label for="num_completion_tokens" style="position: relative;">❗模型对话输出的token数</label>
                    <p id="num_completion_tokens"></p>
                </div>
                <div class="info">
                    <label for="num_total_tokens" style="position: relative;">⁉️总token数</label>
                    <p id="num_total_tokens"></p>
                </div>
                <div class="info">
                    <label for="cost" style="position: relative;">💰费用</label>
                    <p id="cost"></p>
                </div>
                <div class="info">
                    <label for="duration" style="position: relative;">🕑方案生成时间</label>
                    <p id="duration"></p>
                </div>

            </div>

        </div>
    </div>
    <script src="replay/js/app.js"></script>
</body>

</html>
